<template>
  <div class="material-view">
    <!-- 物料基本信息头部 -->
    <div class="material-header">
      <div class="header-info">
        <div class="info-row">
          <div class="info-item">
            <span class="label">物料名称：</span>
            <span class="value">{{ materialInfo.materialName || '-' }}</span>
          </div>
          <div class="info-item">
            <span class="label">描述：</span>
            <span class="value">{{ materialInfo.remark || '-' }}</span>
          </div>
          <div class="info-item">
            <span class="label">物料编号：</span>
            <span class="value">{{ materialInfo.parentId || '-' }}</span>
          </div>
          <div class="info-item">
            <span class="label">版本：</span>
            <span class="value">{{ materialInfo.version || '-' }}</span>
          </div>
        </div>
        <div class="info-row">
          <div class="info-item">
            <span class="label">当前状态：</span>
            <span class="value status-enabled">{{
              materialInfo.status === '1' ? '启用' : '禁用'
            }}</span>
          </div>
          <div class="info-item">
            <span class="label">所属分类：</span>
            <span class="value">{{ materialInfo.categoryName || '-' }}</span>
          </div>
          <div class="info-item">
            <span class="label">加工工序配置：</span>
            <el-link type="primary" @click="viewProcessConfig">查看</el-link>
          </div>
        </div>
        <div class="info-row">
          <div class="info-item">
            <span class="label">创建人：</span>
            <span class="value">{{ materialInfo.createBy || '张三(zhangsan)' }}</span>
          </div>
          <div class="info-item">
            <span class="label">创建时间：</span>
            <span class="value">{{ materialInfo.createTime || '2025-03-18 19:41:04' }}</span>
          </div>
          <div class="info-item">
            <span class="label">最近修改时间：</span>
            <span class="value">{{ materialInfo.updateTime || '2025-04-16 16:08:04' }}</span>
          </div>
        </div>
      </div>
      <div class="header-actions">
        <el-button @click="goBack">返回</el-button>
      </div>
    </div>

    <!-- Tab页导航 -->
    <div class="tab-navigation">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="模板格式" name="template">
          <TemplateFormatTab :material-id="materialId" :materialInfo="materialInfo" />
        </el-tab-pane>
        <el-tab-pane label="标签模板" name="label">
          <LabelTemplateTab :material-id="materialId" :materialInfo="materialInfo" />
        </el-tab-pane>
        <el-tab-pane label="使用记录" name="usage">
          <UsageRecordTab :material-id="materialId" />
        </el-tab-pane>
        <el-tab-pane label="版本管理" name="version">
          <VersionManagementTab :material-id="materialId" />
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 加工工序配置对话框 -->
    <el-dialog
      v-model="processConfigDialogVisible"
      title="加工工序配置"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-table :data="processConfigTableData" border size="small">
        <el-table-column prop="step" label="步骤" width="200" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="name" label="操作" header-align="center" align="center">
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button @click="processConfigDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import TemplateFormatTab from './components/TemplateFormatTab.vue'
import LabelTemplateTab from './components/LabelTemplateTab.vue'
import UsageRecordTab from './components/UsageRecordTab.vue'
import VersionManagementTab from './components/VersionManagementTab.vue'
import { getById } from '@/api/system/materials'

const route = useRoute()
const router = useRouter()

const materialId = ref(route.params.id)
const activeTab = ref('template')
const materialInfo = reactive({
  materialName: '',
  remark: '',
  materialCode: '',
  version: '',
  status: '1',
  categoryName: '', // classification
  createBy: '',
  createTime: '',
  updateTime: '',
  processConfigurationToEntity: []
})
const processConfigDialogVisible = ref(false)
const processConfigTableData = ref([])

// 获取物料详情
async function fetchMaterialInfo() {
  try {
    const res = await getById({ id: materialId.value })
    if (res.data) {
      Object.assign(materialInfo, res.data)
    }
  } catch (error) {
    console.error('获取物料信息失败:', error)
  }
}

function goBack() {
  router.back()
}

function handleTabClick(tab) {
  activeTab.value = tab.name
}

function viewProcessConfig() {
  const processConfig = materialInfo.processConfigurationToEntity || []
  if (processConfig.length === 0) {
    ElMessage.warning('暂无加工工序配置数据')
    return
  }

  // 格式化数据：将序号转换为"步骤X"，名称显示为操作
  processConfigTableData.value = processConfig.map((item, index) => {
    const serialNumber = item.serialNumber || index + 1
    return {
      step: `步骤${getChineseNumber(serialNumber)}`,
      name: item.name || '-'
    }
  })

  processConfigDialogVisible.value = true
}

// 将数字转换为中文数字（一、二、三...）
function getChineseNumber(num) {
  const chineseNumbers = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
  if (num <= 10) {
    return chineseNumbers[num]
  } else if (num < 20) {
    return '十' + chineseNumbers[num - 10]
  } else if (num < 100) {
    const tens = Math.floor(num / 10)
    const ones = num % 10
    return chineseNumbers[tens] + '十' + (ones > 0 ? chineseNumbers[ones] : '')
  }
  return num.toString()
}

onMounted(() => {
  fetchMaterialInfo()
})
</script>

<style lang="scss" scoped>
.material-view {
  background: #fff;
  border-radius: 6px;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 14px;

  .material-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;

    .header-info {
      flex: 1;

      .info-row {
        display: flex;
        margin-bottom: 12px;
        gap: 40px;

        .info-item {
          display: flex;
          align-items: center;
          min-width: 200px;

          .label {
            color: #606266;
            font-weight: 500;
            margin-right: 8px;
            min-width: 80px;
          }

          .value {
            color: #303133;
          }

          .status-enabled {
            color: #67c23a;
          }
        }
      }
    }

    .header-actions {
      margin-left: 20px;
    }
  }

  .tab-navigation {
    flex: 1;
    min-height: 0;

    :deep(.el-tabs__content) {
      height: calc(100% - 40px);
      overflow: auto;
    }
  }
}

:deep(.el-dialog__body) {
  .step-cell {
    background-color: #f5f0f8;
    padding: 8px;
    text-align: center;
  }

  .action-cell {
    background-color: #fff;
    padding: 8px;
    text-align: center;
  }
}
</style>
